<template>
  <div class="full">
    <mu-flex align-items="center" class="user">
      <mu-flex class="one">
        <mu-avatar color="#ffffff" size="65">
          <img src="../assets/images/user.png">
        </mu-avatar>
      </mu-flex>
      <mu-flex class="two" fill justify-content="center" direction="column">
        <mu-flex>
          <span>{{userInfo}}</span>
        </mu-flex>
        <mu-flex class="font12" style="color: #e9e9e9;">
          电话：{{user.tel}}
        </mu-flex>
        <mu-flex>
        </mu-flex>
      </mu-flex>
    </mu-flex>

    <mu-container>
      <mu-paper style="border-radius: 8px; overflow:hidden;">
        <mu-list class="menu-list">
          <mu-list-item avatar button @click="$router.push('myadvise')">
            <mu-list-item-action>
              <mu-icon value="email"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>我的建议</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>

          <mu-list-item avatar button @click="$router.push('/dosetting')">
            <mu-list-item-action>
              <mu-icon value="settings"></mu-icon>
            </mu-list-item-action>
            <mu-list-item-title>设置</mu-list-item-title>
            <mu-list-item-action>
              <mu-icon value="keyboard_arrow_right"></mu-icon>
            </mu-list-item-action>
          </mu-list-item>
        </mu-list>
      </mu-paper>
    </mu-container>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "User",
    computed: {
      ...mapState(['user']),
      userInfo() {
        var name = this.user.name;
        if (name == null) {
          name = ""
        } else {
          name += " "
        }
        if (this.user.houseNo.length > 0 && this.user.roomNo.length > 0) {
          return name + '(' + this.user.houseNo + '#' + this.user.roomNo + ')'
        }
        return '游客'
      }
    }
  }
</script>

<style scoped>
  .user {
    height: 130px;
    padding: 20px 15px;
    margin-bottom: 8px;
    background-color: #009688;
  }

  .user .one {
    padding: 0 12px 0 0;
  }

  .user .two {
    font-size: 18px;
    color: #ffffff;
  }

  .menu-list {
    padding: 0;
  }
</style>
